import React from 'react'
import ReactDOM, { createRoot } from 'react-dom/client'
import { Button } from 'antd'
import { InteractiveCounter, NotificationDemo, ProgressDemo } from './CustomComponents'

const F = () => {
  return <>
    <Button type='primary'>111</Button>
    <InteractiveCounter/>
    <NotificationDemo />
  </>
}

class SimpleAntdWebComponent extends HTMLElement {

  // 当组件挂载或内容变化时触发
  connectedCallback() {
    this.render()
  }

  render() {
    const container = document.createElement('div')
    this.appendChild(container)
    createRoot(container).render(<>
        <F />
    </>)
  }
}

// 定义自定义元素
customElements.define('antd-web-component', SimpleAntdWebComponent)
